<template>
<div :style="'height:'+height+'px;margin-top: 34px;'">
    <quill-editor v-model="content" :style="'height:'+(height-40)+'px'" ref="QuillEditor" :options="editorOption" v-bind="$attrs" v-on="$listeners">
    </quill-editor>
</div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import {
    quillEditor
} from 'vue-quill-editor'

export default {
    components: {
        quillEditor
    },
    model: {
        prop: 'content',
        event: 'change'
    },
    props: {
        height: {
            type: Number,
            default: 200
        },
        content: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            contentHtml: this.content,
            editorOption: {
                placeholder: '',
                modules: {
                    toolbar: {
                        container: [
                            [{
                                'font': []
                            }], //字体
                            // [{
                            //     'header': 1
                            // }, {
                            //     'header': 2
                            // }], // 标题，键值对的形式；1、2表示字体大小
                            [{
                                'header': [1, 2, 3, 4, 5, 6, false]
                            }], //几级标题
                            [{
                                'size': ['small', false, 'large', 'huge']
                            }], // 字体大小

                            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
                            // ['blockquote', 'code-block'], //引用，代码块
                            [{
                                'color': []
                            }, {
                                'background': []
                            }], // 字体颜色，字体背景颜色
                            [{
                                'align': []
                            }], //对齐方式
                            ['clean'], //清除字体样式
                            [{
                                'list': 'ordered'
                            }, {
                                'list': 'bullet'
                            }], //列表
                            // [{
                            //     'script': 'sub'
                            // }, {
                            //     'script': 'super'
                            // }], // 上下标
                            // [{
                            //     'indent': '-1'
                            // }, {
                            //     'indent': '+1'
                            // }], // 缩进
                            // [{
                            //     'direction': 'rtl'
                            // }], // 文本方向

                            // ['image', 'video'] //上传图片、上传视频

                        ],
                        handlers: {
                            "image": function (e) {
                                let quill = this.quill
                                let length = quill.getSelection().index
                                let src = "https://simages9.juwaistatic.com/auto/720x490/store-x/d55c302354822561066a42ecde461f1f-6b29109365c1d9d99ad0da6e4edd8478.jpg"
                                quill.insertEmbed(length, 'image', src)
                                quill.setSelection(length + 1)
                            }
                        }
                    }
                },
                theme: 'snow'
            }
        }
    },
    methods: {
        onEditorChange(editor) {
            console.log(editor.html)
        }
    },
}
</script>

<style lang="less" scoped>
.ql-editor {
    height: 400px;
}

/deep/ .ql-toolbar.ql-snow {
    border-radius: 4px 4px 0px 0px;
    padding: 0px 8px;
}

/deep/ .ql-container.ql-snow {
    border-radius: 0px 0px 4px 4px;
}

/deep/ .ql-toolbar.ql-snow,
/deep/ .ql-container.ql-snow {
    border: 1px solid @border-color-base
}

/deep/ .ql-snow .ql-picker {
    height: auto;
}
</style>
